<html>
    <head>
        <title>跨端注意事项</title>
    </head>
    <body>
        <script>


            // 跨端注意事项

                    /*
                        https://zh.uniapp.dcloud.io/matter.html

                        每个端有每个端的特点，有的能被抹平，有的不可能被抹平。

                        注意： 跨端，不是吧web的习惯迁移到全平台。而是 "按照uni的写法，然后全平台使用"。
                    */

                    /*
                        一、H5正常单App异常的可能性

                              1、css 异常

                                      ①、不支持的选择器

                                              非 H5端不支持  "*"  选择器(通配符选择器)

                                              body的元素选择器请改为page，同样，div 和 ul 和 li 等改为 view、span ，

                                              text、a 改为 navigator、img 改为 image...

                                      ②、组件和页面样式相互影响

                                              非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性，H5端为了隔离页面间的样式默认启用了 scoped

                                      ③、webview 浏览器兼容性

                                              vue页面在 App端，默认是被系统的webview 渲染的(不是手机自带浏览器，是rom的webview),在较老的手机上，比如Android4.4、5.0或iOS8，很多css是不支持的

                                              所以不要使用太新的css，会导致界面异常。

                                              注意，这不意味着不能使用 flex, Android4.4也支持flex，只是不要使用太新的css

                                              可以找Android4.4手机或使用pc模拟器实际测试下，大多数国产Android模拟器都是4.4或5.0。

                                              从 uni-app 2.5.3 起，Android端支持引入腾讯x5浏览器内核，可以抹平低端Android的浏览器兼容性问题，详见x5使用指南

                                              小程序不存在浏览器兼容问题，它字典了一个很大的Webview。所以，如果你的H5和小程序界面正常，而Android低端机App界面异常，

                                              且App没有使用x5引擎，那基本就可以判定是因为css兼容性问题导致。

                                              app端 nvue页面，不存在浏览器兼容问题，，它自带一个统一的原生渲染引擎，不依赖webview.

                                              Android4.4对应的webview是chrome37。 各端浏览器内核的详情情况参阅：

                                                         https://ask.dcloud.net.cn/article/1318

                                      ④、原生组件层级问题
                                      
                                            H5没有原生组件问题的概念，非H5端游原生组件并引发了原声组件层级高于前端组件的概念，
                                            
                                            要遮挡 video 、map 等原生组件，请使用 cover-view

                              2、使用了非H5端不支持的API

                                            小程序和App的js运行在 jscore 下，而不是运行在浏览器下，没有浏览器中专用的js对象：  
                                            
                                                    eg:  document、xmlhttp、Cookie、window、location、navigator、localstorage、websql、inexdb、webgl等对象。

                                            如果你的代码没有直接使用这些，那很可能是引入的第三方库使用了这些。

                                            如果是后者，去插件市场("https://ext.dcloud.net.cn/")搜索替代方案.

                                            要知道非H5端的js是运行在一个独立的js Core  或 v8下。(手机app、小程序运行在特定js引擎下，而非浏览器环境)

                                            从HBuilderX 2.6起，App端新增了renderjs,这是一种运行在视图层的js，vue页面通过renderjs可以操作浏览器对象，

                                            进而可以让基于浏览器的库直接在 uni-app 的App端运行，注入 echarts、threejs，详见：https://uniapp.dcloud.net.cn/tutorial/renderjs.html

                             3、使用了非H5端不支持的vue语法，受小程序自定义组件限制的写法，详见：  https://zh.uniapp.dcloud.io/tutorial/vue-components

                             4、不要再引用组件的地方在组件标签上写 style="xxx" （不要给组件添加行内样式），要在组件内部写样式

                             5、url(//action.net)  等路径，改为 url(https://action.net), 因为在App端 "//" 是file协议

                             6、很多人在H5端联网时使用本地测试服务地址(localhost 或 123.0.0.1),这样的联网地址手机App端是无法访问的，请使用手机可访问的IP进行联网。
                    */

                    /*
                        二、H5正常但小程序异常的可能性

                              1、同上

                              2、v-html在h5和app-vue均支持，但小程序不支持

                              3、小程序要求连接的网址都要配白名单
                    */

                    /*
                        三、小程序正常但App异常的可能性

                                vue页面在App端的渲染引擎默认是系统webview （不是手机自带浏览器，是rom的webview）,在较老的手机上，比如 Android4.4、5.0 或ios8，一些新出的css语法是不支持的。

                                注意这不意味着不能使用flex, Android4.4也支持 flex ， 只是不要使用太新的css。 可以找 Android4.4手机或使用pc模拟器实际测试下，大多数果茶 Android模拟器都是4.4 或 5.0.

                                小程序不存在浏览器兼容问题，它内置了几十M自己的定制的webview.  所以，如果你的H5和小程序界面正常，而App界面异常，大多是因为css兼容性。

                                解决这类问题：

                                    1、放弃老款手机支持

                                    2、不用使用太新的css语法，可以在caniuse 查询

                                    3、从 uni-app 2.5.3开始， Android端支持引入腾讯X5浏览器内核，可以抹平低端Android的浏览器兼容性问题，详见x5使用指南： https://ask.dcloud.net.cn/article/36806
                    */

                    /*
                        四、小程序和App正常、H5异常的可能性

                                1、在uni-app 2.4.7以前，H5端不支持微信小程序自定义组件，即 wxcomponents 下的组件，此时可能产生兼容性问题。

                                  从 2.4.7起，H5也支持微信自定义组件了，不再存在这方面的兼容问题。

                                2、App端使用了App特有的API 和 功能， 比如 plus、Native.js、subNVue 、原生插件等

                                3、使用了小程序专用的功能，比如微信卡券、小程序插件、微信小程序云开发等。  对于云开发，建议使用可跨端的uniCloud。
                    */

                    /*
                        五、App正常，小程序、H5异常的可能性

                                1、代码中使了 App端特有的plus、Native.js、subNVue、原生插件等功能
                    */


                    /*
                        六、使用Vue.js的注意事项


                                1、uni-app基于 Vue2.o 实现，开发者需要注意 Vue 1.0->2.0 的差异。

                                2、data属性必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次的数据。

                                                    //正确用法，使用函数返回对象
                                                    data() {
                                                        return {
                                                            title: 'Hello'
                                                        }
                                                    }

                                                    //错误写法!!，会导致再次打开页面时，显示上次数据
                                                    data: {
                                                        title: 'Hello'
                                                    }

                                3、在微信小程序端，uni-app 将数据绑定功能委托给 Vue ，开发者需要按照 Vue 2.0 的写法实现数据绑定，不支持微信小程序的数据绑定写法，
                                
                                          所以，如下写法不支持：

                                                    <view id="item-{{id}}"></view>	

                                                需要修改为：

                                                    <view v-bind:id="'item-' + id "></view>	
                    */

                    /*
                        七、区别于传统 web 开发的注意点

                                你之前可能习惯自由的 web 开发，但目前各家小程序都有很多限制。 当然限制是为了在框架层更好的优化用户体验，所以小程序的体验要优于web。

                                并且这些限制只是写法的限制，并不影响功能。  

                                如果你做过微信小程序开发，对这些限制应该已经很了解了。如果没有做过小程序，请仔细阅读本节。


                                1、JS注意

                                            ①、 非H5端，不能使用浏览器自带对象，比如 document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。

                                                因为各家小程序快应用都支持这些对象。

                                            ②、没有这些浏览器自带对象并不影响业务开发，uni提供的api足够完成业务。

                                            ③、uni的api 在编译到web平台运行时，其实也会转为浏览器的js api

                                                        ★、App端若要使用操作window、document的库，需要通过renderjs来实现。

                                            ④、uni 的 api 是多端可用的。在条件编译区，每个平台的专有api也可以使用， 比如 wx、plus等 api 可以分别在微信下和 app 下使用。

                                            ⑤、处于降低小程序向 uni-app迁移的成本的考虑， wx 的api 在app里也可以直接运行，比如写 wx.request 和 uni.request 是一样的，

                                            但是，仍然建议仅在微信的条件编译器区使用wx的api。

                                2、Tag(标签)注意

                                            ①、uni-app 的标签与小程序的tag差不多，与html的tag不一样，比如 div 要改成view， span 要改成 text、a 要改成 navigator.
                                            
                                            ②、处于降低 h5 应用向 uni-app 迁移成本的考虑，写成div、span也可以运行在 app 和 小程序上， 因为 uni-app 编译器会把这些HTML标签编译为小程序标签。

                                               但仍然建议养成新习惯。

                            
                                3、Css注意

                                            ①、虽然大部分css样式在微信小程序和 app中都支持，单推荐使用flex布局模型，这种布局更灵活高效且支持更多平台 (比如 nvue、快应用支持flex布局)

                                            ②、单位方面， uni-app 默认支持 rpx。  这是一种可跨端的通用单位。  详见：  https://zh.uniapp.dcloud.io/tutorial/syntax-css.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D


                                4、工程目录注意

                                            ①、页面文件：  放到pageｓ目录下：
                                            
                                                          推荐方案：  新建一个页面目录，然后创建一个同名的.vue文件，如 /pages/list/list.vue ,  接着在 pages.json 里完成注册。

                                                                     这与小程序的策略相同。

                                            ②、自定义组件：  访到 component 目录

                                            ③、静态资源：   如图片，固定放到 static 目录下。  这是 webpack的规则


                                5、数据绑定方式的注意

                                            uni-app 基于 Vue2.0实现，开发者需要注意 Vue 1.0 ---2.0 的使用差异


                                6、每个页面支持使用原声 title, 首页支持使用原声底部 tab, 这些是要在 pages.json里配置，这些并不是vue页面的一部分。
                                
                                          当然vue里的js api 也可以动态修改原生 title


                                7、虽然使用vue ， 但在 app 和 小程序里，不是 spa 而是mpa


                                8、位置坐标系统统一为国测局坐标系 gcj02 ，这种坐标系可以被多端支持。  

                                            老版5+的百度定位和百度地图使用的是百度私有坐标系bd09ll，这种坐标系需要转换。
                                            
                                            新版uni-app里的百度地图已经默认改为gcj02。高德地图不受影响，一直是gcj02
                    */


                    /*
                        八、H5开发注意

                                    1、H5发布到服务器注意：

                                            ①、配置发行后的路径 (发行在网站根目录可不配置)，比如发行网站路径是 wwww.xx.com/html5,在 manifest.json 文件内编辑h5节点，router 下增加 base属性为　html5 

                                                eg:  "h5":{
                                                        "router":{
                                                            "base":"/html5/"
                                                        }
                                                     }

                                                     示例图片:

                                                     https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/html5-a.png

                                            
                                            ②、点击菜单   "发行" -> "H5"

                                            ③、在当前目录下的 unpackage/dist/build/web 目录下找出的资源，部署服务器(或者使用本地服务器预览)，如需部署到相对路径(Vue2项目支持本地 file协议打开)

                                                     参考：https://ask.dcloud.net.cn/article/37432。 
                                                     
                                            ④、 从 HBuilderX 4.06 开始，为了统一概念，编译目录从 h5 调整为 web，开发者的 CI/CD 流程需要同步进行更新。   


                                    2、引用第三方 js 的方式

                                            ①、通过 npm 引入  (通过条件编译，只有是 h5 平台才 import 相应的库)

                                            ②、在 manifest 文件编辑 h5 节点的 template 属性，填写 html 模板路径，在html模板里可以使用script的方式引入三方的js，如下示例是加了百度统计的html模板部分代码，

                                               模板全部代码可参考：  自定义模板 https://zh.uniapp.dcloud.io/collocation/manifest.html#h5-template

                                               eg：

                                                        <body>
                                                                    <noscript>
                                                                        <strong>Please enable JavaScript to continue.</strong>
                                                                    </noscript>
                                                                    <div id="app"></div>
                                                                    <-- built files will be auto injected
                                                                    <script>
                                                                        var _hmt = _hmt || [];
                                                                        (function() {
                                                                            var hm = document.createElement("script");
                                                                            hm.src = "https://hm.baidu.com/hm.js?xxxxxx";
                                                                            var s = document.getElementsByTagName("script")[0];
                                                                            s.parentNode.insertBefore(hm, s);
                                                                        })();
                                                                    <//script>
                                                        </\body>


                                    3、H5版 uni-app 全支持 vue 语法，所以可能造成部分写法在H5端生效，在小程序或App端不生效。


                                    4、H5 校验了更严格的 vue语法，有些洗发不规范会报警，比如：  data 后面写对象会报警，必须写function;

                                          不能膝盖 props 的值；  组件最外层template 节点下不允许包含多个节点等。

                                    
                                    5、编译为H5后生成的是单页应用 (SPA)


                                    6、如果遇到跨域造成js无法联网，注意网络请求 (request、uploadFile、dowonloadFile等)在浏览器存在跨域限制，

                                         解决方案有详见： https://ask.dcloud.net.cn/article/35267


                                    7、App 和 小程序 的 tabbar 均是原生控件，元素区域坐标是不好喊原生导航栏和 tabbar的; 
                                    
                                         而H5里导航栏和 tabbar 是 div 模拟出来的，所以元素坐标会包含导航栏和 tabbar 的高度。

                                         为了优雅的解决多端高度定位问题，uni-app 新增了2个css变量  --window-top  和  --window-bottom,

                                         这里代表了页面的内容区域距离顶部和底部的距离。  举个例子，如果你想在原生 tabbar 上方陷入一个菜单，之前写 bottom:0。 

                                         这样的写法编译到 h5后，这个菜单会和 tabbar 重叠，位于屏幕底部。

                                         而改为使用 bottom: var(--window-bottom),则不管在 app 下还是在h5下，这个菜单都是悬浮在 tabbar 上方的。

                                         这就避免了写条件编译代码。当然仍然可以使用 H5 的条件编译处理界面的不同。


                                    8、CSS内使用　vh 单位的时候注意 100vh 包含导航栏，使用时需要减去导航栏和 tabbar 高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。


                                    9、正常支持 rpx, px是物理像素。 暂不支持通过设置 manifest.json 的 "transformPx":true，来把 px 当动态单位使用。


                                    10、使用罗盘、地理位置、加速计等相关接口需要使用 https 协议，本地预览(localhost)可以使用 http 协议。


                                    11、PC 端 Chrome 浏览器模拟设备测试的时候，获取位置API需要连接谷歌服务器。


                                    12、vue2 组件内(页面除外) 不支持 onLoad、onShow 等页面生命周期， vue3 请使用组合式 api 监听。


                                    13、为了避免与uni-app 内置组件冲突，自定义组件请加上前缀(但不能是u 和 uni )。  比如可使用的自定义组件名称： my-view 、 m-input、 we-icon ,

                                        例如不可使用的自定义组件名称： u-view 、 uni-input ，如果已有项目使用了可能造成冲突的名称，请修改名称，另外微信小程序下自定义组件名称不能以 wx 开头。

                                    
                                    14、vue3 开发阶段不会自动处理语法兼容问题，如果在低版本浏览器上运行，需要自行处理，可参考： https://cn.vitejs.dev/config/build-options#build-target
                                                
                    */


                    /*
                         九、 小程序开发注意：
                    */

                                /*
                                    1、文件名称

                                                vue3项目，页面或组件目录下，不能使用与 vue、nvue 同名的 js 、 ts 文件。

                                                小程序端 vue 文件会被编译为同名的 js、json、wxml、wxss 文件，如果存在同名 js、ts 文件会导致冲突。
                                */

                                /*
                                    2、自定义组件渲染差异

                                                微信（可以使用virtualHost配置）/QQ/百度/抖音这四家小程序，自定义组件在渲染时会比App/H5端多一级节点，在写样式时需要注意：

                                                ①、使用 flex 布局时，直接给自定义组件的父元素设置为 display:flex 不能影响到自定义组件内部的根节点，需要设置当前自定义组件为 display:flex 才可以。

                                                ②、在自定义组件内部设置根元素高度为100%，不能撑满自定义组件父元素。需要同时设置当前自定义组件高度为100% 才可以。


                                                支付宝小程序默认启用了 virtualHost 配置不会插入节点，一般不存在如上问题。
                                */

                                /*
                                    3、vendor.js 过大的处理方式

                                                小程序工具提示 vendor.js 过大，已经跳过 es6 向 es5 转换。  这个转换本身不用理会，因为 vendor.js 已经是es5的了。

                                                关于体积控制，参考如下：

                                                    ①、使用运行时代码压缩

                                                            HBuilderX创建的项目勾选运行 -> 运行到小程序模拟器 -> 运行时是否压缩代码

                                                    ②、cli 创建的项目可以在 package.json 中添加参数 --minmize, 
                                                    
                                                            示例：  
                                                                 "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
                                                    
                                                    ③、使用分包优化： 
                                                    
                                                            关于分包优化的说明  
                                                            https://zh.uniapp.dcloud.io/collocation/manifest.html#%E5%85%B3%E4%BA%8E%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96%E7%9A%84%E8%AF%B4%E6%98%8E
                                                    
                                */

                                /*
                                     4、各家小程序开发工具下载地址：

                                                微信小程序开发者工具：  https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

                                                支付开发者工具：   https://opendocs.alipay.com/mini/ide/download

                                                百度开发者工具：   https://smartprogram.baidu.com/docs/introduction/tool/

                                                抖音开发者工具：   https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/changelog/update-log/

                                                飞书开发者工具：   https://open.feishu.cn/document/tools-and-resources/development-tools/overview-of-ide
                                */

                                /*
                                    5、微信小程序开发注意
 
                                                 建议关注微信小程序当前bug列表，对已知Bug，想办法避让。    https://developers.weixin.qq.com/community/develop/issueList?type=%E4%BF%AE%E5%A4%8D%E4%B8%AD&block=bug
                                                 
                                                 ios 真机调试时，需要开启 "详情" 下 "本地设置" 的 "上传代码时自动压缩脚本文件" 选项，否则会报错。
                                */

                                /*
                                    6、支付宝小程序开发注意

                                                ①、showLoading 是不透传的，也就是说 loading 显示的时候无法点击页面内容。

                                                ②、文件名或文件夹名中不允许出现 @ 符号。
                                                
                                                ③、网络请求返回的数据会严格按照 dataType 进行处理，如果不符合规范则会抛出错误，而不是按照原格式返回。
                                                
                                                ④、canvas 组件的标识是 id，而不是 canvas-id。目前还未进行处理，所以需要主动添加 id 属性。
                                                
                                                ⑤、目前测试的结果，导航栏只有设置背景颜色为 #FFF(FFF) 时才会变成黑色文字。
                                                
                                                ⑥、支付宝小程序的导航栏是支持透明渐变效果的，后面会提供相关的配置。
                                                
                                                ⑦、使用伪元素做边框时，高度值不能用 1rpx，需要直接用 1px。
                                                
                                                ⑧、不支持 ECharts。
                                                
                                                ⑨、支付功能模拟不了，需要真机测试。①、show
                                */

                                /*
                                    7、百度小程序开发注意

                                                ①、不支持属性选择器。
                                                
                                                ②、不支持 scoped。
                                                
                                                ③、login / getUserInfo /支付等功能在模拟器（开发工具）上不能模拟。
                                                
                                                ④、map 组件在开发工具上预览效果不对，但是手机上是对的。
                                                
                                                ⑤、getSystemInfo 获取到的 windowHeight 在模拟器中值不正确，真机预览是正确的。
                                                
                                                ⑥、v-if 和 v-for 不可在同一标签下同时使用。
                                                
                                                ⑦、页面中引入自定义组件时，渲染的结果中外层会有一个 template 标签，这会导致部分选择器对应的样式匹配不上。
                                */

                                /*
                                    8、快应用开发注意
                                                            
                                                HBuilderX 2.7.12+ 版支持

                                                ①、quickapp-webview

                                                        目前仅vivo oppo支持

                                                        最小平台版本支持需要 1063

                                                        暂不支持 canvas 组件

                                                ②、quickapp-webview-huawei

                                                        Huawei QuickApp IDE 最低版本 2.5.2 （已知该版本工具有个bug：不支持项目名称中包含空格）

                                                        最小平台版本支持需要 1070

                                                        暂不支持 uni.login(OBJECT)，暂时使用条件编译，参考文档 https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-api-hwaccount

                                                        暂不支持 支付，支付依赖uni.login(OBJECT)

                                                        页面有滚动条时 canvas 组件不会跟随页面滚动

                                                        rich-text 组件某些情况下显示异常

                                                ③、sign 证书配置

                                                        sign放到项目根目录，编译后自动拷贝到 .quickapp/sign，每次编译完成时会删除.quickapp，避免证书丢失
                                */
        </script>
    </body>
</html>